<template>
  <view class="drawer">
    <uni-drawer 
      ref="showRight" 
      width="300" 
      mode="right"
      :mask-click="true"
      @change="change($event,'showRight')"
    >
    	<view class="scroll-view">
    		<scroll-view class="scroll-view-box" scroll-y="true">
          
          <!-- 车型-->
          <view class="info" v-if="fromBrand">
          	<text class="info-text">车型</text>
          </view>
          <view class="info-year" v-if="fromBrand">
            <view 
              v-for="(item,index) in typeSpanList" :key="index"
              :class="{'drawer-active':typeActive == index}"
              @click="changetTypeActive(index)"
            >
              {{item}}  
            </view>
          </view>
          <!-- 排量-->
          <view class="info" v-if="fromBrand">
          	<text class="info-text">排量</text>
          </view>
          <view class="info-year" v-if="fromBrand">
            <view 
              v-for="(item,index) in displacementSpanList" :key="index"
              :class="{'drawer-active':displacementActive == index}"
              @click="changeDisplacementActive(index)"
            >
              {{item}}  
            </view>
          </view>
          
          <view v-if="fromBrand" 
          style="width: 100%;height: 1px;background-color:#586da0;margin-top: 4vh;opacity: 0.6;">
          </view>
          
          <!-- 一级产品类型-->
          <view class="info">
          	<text class="info-text">一级产品类型</text>
          </view>
          <view class="info-year">
            <view 
              v-for="(item,index) in productTypeList" :key="index"
              :class="{'drawer-active':productTypeActive == index}"
              @click="changeProductTypeActive(index)"
            >
              {{item.name}}  
            </view>
          </view>
          
          <!-- 二级产品类型-->
    			<view class="info">
    				<text class="info-text">二级产品类型</text>
    			</view>
          <view class="info-year">
            <view 
              v-for="(item,index) in categoryList" :key="index"
              :class="{'drawer-active':categoryActive == index}"
              @click="changeCategoryActive(index)"
            >
              {{item.name}}  
            </view>
          </view>
          
          <!-- 生产年份-->
          <view class="info">
          	<text class="info-text">生产年份</text>
          </view>
          <view class="info-year">
            <view 
              v-for="(item,index) in productSpanList" :key="index"
              :class="{'drawer-active':drawerActive == index}"
              @click="changeActive(index)"
            >
              {{item}}  
            </view>
          </view>

    		</scroll-view>
        
        
        <view class="info-bottom">
          <button @click="reset">重置</button>
          <button @click="filterConfirm">确定</button>
        </view>
    	</view>
    </uni-drawer>
        
  </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
  import {productSpan, typeSpan, partsType, displacementSpan} from '@/utils/mock.js'
  import {getECatalogDict} from '@/api/parts/product.js'
  export default {
    data(){
      return {
        showRight: false,
        drawerActive:-1,
        typeActive:-1,
        displacementActive:-1,
        productTypeActive:-1,
        categoryActive:-1,
        productSpanList:[],
        typeSpanList:[],
        displacementSpanList:[],
        productTypeList:[],
        categoryList:[],
      }
    },
    props:{
      from:{
        type:String,
        default:''
      },
      query:{
        type:String,
        default:''
      }
    },
    computed:{
      ...mapState('app',['drawerSwitch']),
      fromBrand(){
        // debugger
        console.log("fromBrand",this.from)
        return this.from == 1
      },
    },
    methods:{
      ...mapMutations('app',['TOGGLE_SWITCH','COLSE_SWITCH','OPEN_SWITCH']),
      /* 初始数据*/
      initMock(){
        this.productSpanList = productSpan //车型的生产年份
        this.typeSpanList = typeSpan //汽车车型
        this.displacementSpanList = displacementSpan //排量
        this.productTypeList = partsType //一级产品类型
        this.categoryList = partsType //二级产品类型
      },
      initCondition(){
        // debugger
        let data = {}
        console.log("initCondition",this.from)
        if(this.from == 1){
          data.brand = this.query
        }else if(this.from == 2){
          data.vin = this.query
        }
        getECatalogDict(data).then(res=>{
          let respone = res.data
          this.productSpanList = respone.years //车型的生产年份
          this.typeSpanList = respone.types //汽车车型
          this.displacementSpanList = respone.displacements //排量
          this.productTypeList = respone.superTypes //一级产品类型
          this.categoryList = respone.secondTypes //二级产品类型
        })
      },
      /* 重置*/
      reset(){
        this.drawerActive = -1
        this.typeActive = -1
        this.displacementActive = -1
        this.productTypeActive = -1
        this.categoryActive = -1
      },
      /* 切换一级产品类型*/
      changeProductTypeActive(index){
        this.productTypeActive = index
      },
      /* 切换二级产品类型*/
      changeCategoryActive(index){
        this.categoryActive = index
      },
      /* 切换年份*/
      changeActive(index){
        this.drawerActive = index
      },
      /* 切换车型*/
      changetTypeActive(index){
        this.typeActive = index
      },
      /* 切换排量*/
      changeDisplacementActive(index){
        this.displacementActive = index
      },
      confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
      closeLocalDrawer(){
        this.TOGGLE_SWITCH()
      },
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
        if(e){
          this.OPEN_SWITCH()
        }else{
          this.COLSE_SWITCH()
        }
			},
      /* 点击确定*/
      filterConfirm(){
        if(this.drawerActive == -1 && this.typeActive == -1 
        && this.displacementActive == -1 && this.productTypeActive == -1
        && this.categoryActive == -1){
          this.$emit("filterConfirm",{})
          this.COLSE_SWITCH()
          return
        }
        let selectType;
        let selectDisplacement;
        console.log("selectType",selectType)
        console.log("selectDisplacement",selectDisplacement)
        if(this.from == 1){
          selectType = this.typeSpanList[this.typeActive]
          selectDisplacement = this.displacementSpanList[this.displacementActive]
        }
        let selectProduct = this.productSpanList[this.drawerActive]
        let selectProductType = this.productTypeList[this.productTypeActive]
        let selectCategory = this.categoryList[this.categoryActive]
        
        let data = {}
        if(selectProduct){
          data.carYear = selectProduct
        }
        if(selectType){
          data.type = selectType
        }
        if(selectDisplacement){
          data.displacement = selectDisplacement
        }
        if(selectProductType){
          data.superTypeId = selectProductType.id
        }
        if(selectCategory){
          data.productTypeId = selectCategory.id
        }
        this.$emit("filterConfirm",data)
        this.COLSE_SWITCH()
      },
    },
    watch:{
      drawerSwitch(newVal,oldVal){
        if(newVal){
          this.showDrawer('showRight')
        }else{
          this.closeDrawer('showRight')
        }
        this.showRight = newVal
      }
    },
    onNavigationBarButtonTap(e) {
    	if (this.showLeft) {
    		this.$refs.showLeft.close()
    	} else {
    		this.$refs.showLeft.open()
    	}
    },
    // app端拦截返回事件 ，仅app端生效
    onBackPress() {
    	if (this.showRight || this.showLeft) {
    		this.$refs.showLeft.close()
    		this.$refs.showRight.close()
    		return true
    	}
    },
    created() {
      // this.initMock()
    },
    mounted() {
      this.initCondition()
    }
  }
</script>

<style>
  @import url('../../static/style/eCatalog/drawer.css');
</style>